<template>
    <main class="main-page"  id="">
        <template v-if="pageReady">
            <template v-if="showHeader">
                <section class="page-section mb-3" >
                    <div class="container">
                        <div class="grid justify-content-between align-items-center">
                            <div  v-if="!isSubPage"  class="col-fixed " >
                                <Button @click="$router.go(-1)"   class="p-button p-button-text " icon="pi pi-arrow-left"  />
                            </div>
                            <div  class="col " >
                                <div class=" text-2xl text-primary font-bold" >
                                    {{ $t('addNewStudentgradesummary') }}
                                </div>
                            </div>
                            
                        </div>
                    </div>
                </section>
            </template>
            <section class="page-section " >
                <div class="container">
                    <div class="grid ">
                        <div  class="md:col-9 sm:col-12 comp-grid" >
                            <div >
                                <form ref="observer" tag="form" @submit.prevent="submitForm()" :class="{ 'card ': !isSubPage }" class=" ">
                                    <div class="grid">
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('studentId') }} *
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <api-data-source :enable-cache="true"   api-path="components_data/student_id_option_list" >
                                                        <template v-slot="req">
                                                            <Dropdown  class="w-full" :class="getErrorClass('student_id')"   :loading="req.loading"   optionLabel="label" optionValue="value" ref="ctrlstudent_id"  v-model="formData.student_id" :options="req.response" :label="$t('studentId')"  :placeholder="$t('selectAValue')" >
                                                            </Dropdown> 
                                                            <small v-if="isFieldValid('student_id')" class="p-error">{{ getFieldError('student_id') }}</small> 
                                                        </template>
                                                    </api-data-source>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('semesterName') }} *
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <InputText  ref="ctrlsemester_name" v-model.trim="formData.semester_name"  :label="$t('semesterName')" type="text" :placeholder="$t('enterSemesterName')"      
                                                    class=" w-full" :class="getErrorClass('semester_name')">
                                                    </InputText>
                                                    <small v-if="isFieldValid('semester_name')" class="p-error">{{ getFieldError('semester_name') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('semesterStart') }} *
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <Calendar  :showButtonBar="true" class="w-full" :class="getErrorClass('semester_start')" dateFormat="yy-mm-dd" v-model="formData.semester_start" :showIcon="true"     mask="YYYY-MM-DD"      />
                                                    <small v-if="isFieldValid('semester_start')" class="p-error">{{ getFieldError('semester_start') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('semesterEnd') }} *
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <Calendar  :showButtonBar="true" class="w-full" :class="getErrorClass('semester_end')" dateFormat="yy-mm-dd" v-model="formData.semester_end" :showIcon="true"     mask="YYYY-MM-DD"      />
                                                    <small v-if="isFieldValid('semester_end')" class="p-error">{{ getFieldError('semester_end') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('gradeData') }} *
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <InputText  ref="ctrlgrade_data" v-model.trim="formData.grade_data"  :label="$t('gradeData')" type="text" :placeholder="$t('enterGradeData')"      
                                                    class=" w-full" :class="getErrorClass('grade_data')">
                                                    </InputText>
                                                    <small v-if="isFieldValid('grade_data')" class="p-error">{{ getFieldError('grade_data') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('dataHash') }} *
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <InputText  ref="ctrldata_hash" v-model.trim="formData.data_hash"  :label="$t('dataHash')" type="text" :placeholder="$t('enterDataHash')"      
                                                    class=" w-full" :class="getErrorClass('data_hash')">
                                                    </InputText>
                                                    <small v-if="isFieldValid('data_hash')" class="p-error">{{ getFieldError('data_hash') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('transactionHash') }} 
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <InputText  ref="ctrltransaction_hash" v-model.trim="formData.transaction_hash"  :label="$t('transactionHash')" type="text" :placeholder="$t('enterTransactionHash')"      
                                                    class=" w-full" :class="getErrorClass('transaction_hash')">
                                                    </InputText>
                                                    <small v-if="isFieldValid('transaction_hash')" class="p-error">{{ getFieldError('transaction_hash') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('onchainStatus') }} 
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <InputText  ref="ctrlonchain_status" v-model.trim="formData.onchain_status"  :label="$t('onchainStatus')" type="text" :placeholder="$t('enterOnchainStatus')"      
                                                    class=" w-full" :class="getErrorClass('onchain_status')">
                                                    </InputText>
                                                    <small v-if="isFieldValid('onchain_status')" class="p-error">{{ getFieldError('onchain_status') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-12">
                                            <div class="formgrid grid">
                                                <div class="col-12 md:col-3">
                                                    {{ $t('onchainTime') }} 
                                                </div>
                                                <div class="col-12 md:col-9">
                                                    <Calendar  :showButtonBar="true" :showTime="true" dateFormat="yy-mm-dd" hourFormat="24" v-model="formData.onchain_time" :showIcon="true" class="w-full" :class="getErrorClass('onchain_time')"     mask="yy-MM-DD HH:mm"     />
                                                    <small v-if="isFieldValid('onchain_time')" class="p-error">{{ getFieldError('onchain_time') }}</small> 
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div v-if="showSubmitButton" class="text-center my-3">
                                        <Button class="p-button-primary" type="submit" :label="$t('submit')" icon="pi pi-send" :loading="saving" />
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </template>
    </main>
</template>
<script setup>
	import {  computed,  reactive, toRefs, onMounted } from 'vue';
	import { required } from 'src/services/validators';
	import { useApp } from 'src/composables/app.js';
	import { $t } from 'src/services/i18n';
	import { useAddPage } from 'src/composables/addpage.js';
	import { usePageStore } from 'src/store/page';
	const props = defineProps({
		pageStoreKey: {
			type: String,
			default: 'STUDENTGRADESUMMARY',
		},
		pageName : {
			type : String,
			default : 'studentgradesummary',
		},
		routeName : {
			type : String,
			default : 'studentgradesummaryadd',
		},
		apiPath : {
			type : String,
			default : 'studentgradesummary/add',
		},
		submitButtonLabel: {
			type: String,
			default: () => $t('submit'),
		},
		formValidationError: {
			type: String,
			default: $t('formIsInvalid'),
		},
		formValidationMsg: {
			type: String,
			default: $t('pleaseCompleteTheForm'),
		},
		msgTitle: {
			type: String,
			default: $t('createRecord'),
		},
		msgAfterSave: {
			type: String,
			default: () => $t('recordAddedSuccessfully'),
		},
		msgBeforeSave: {
			type: String,
			default: () => $t(''),
		},
		showHeader: {
			type: Boolean,
			default: true,
		},
		showSubmitButton: {
			type: Boolean,
			default: true,
		},
		redirect: {
			type : Boolean,
			default : true,
		},
		isSubPage: {
			type : Boolean,
			default : false,
		},
		pageData: { // use to set formData default values from another page
			type: Object,
			default: () => ({
				student_id: "", semester_name: "", semester_start: new Date(), semester_end: new Date(), grade_data: "", data_hash: "", transaction_hash: "", onchain_status: "not_on_chain", onchain_time: new Date(), 
			})
		},
	});
	//lines
	const store = usePageStore(props.pageStoreKey);
	const app = useApp();
	
	const formData = reactive({ ...props.pageData });
	
	//vuelidate form validation rules
	const rules = computed(() => {
		return {
			student_id: { required },
			semester_name: { required },
			semester_start: { required },
			semester_end: { required },
			grade_data: { required },
			data_hash: { required },
			transaction_hash: {  },
			onchain_status: {  },
			onchain_time: {  }
		}
	});
	
	const page = useAddPage({ store, props, formData, rules, beforeSubmit, afterSubmit });
	
	// event raised before submit form
	function beforeSubmit(){
		return true;
	}
	
	// event raised after form submited
	function afterSubmit(response) { 
		app.flashMsg(props.msgTitle, props.msgAfterSave);
		page.setFormDefaultValues(); //reset form data
		if(app.isDialogOpen()){
			app.closeDialogs(); // if page is open as dialog, close dialog
		}
		else if(props.redirect) {
			app.navigateTo(`/studentgradesummary`);
		}
	}
	
	const {  saving, pageReady, } = toRefs(page.state);
	
	const { submitForm, getErrorClass, getFieldError, isFieldValid,  } = page.methods;
	
	onMounted(()=>{
		const pageTitle = $t('addNewStudentgradesummary');
		app.setPageTitle(props.routeName, pageTitle); // set browser page title
	});
	
	// expose page object for other components access
	defineExpose({
		page
	});
</script>
<style scoped>
</style>
